<script setup lang="jsx">
  import {watch,inject,ref,nextTick,reactive,computed} from 'vue'
import waybillTrayList from '@/api/abroad/waybillTrayList'
import waybillList from '@/api/abroad/waybillList'
import { Message, Modal } from '@arco-design/web-vue'
import dicthelpApi from "@/api/dicthelpApi.js";
import {getDictData} from "@/utils/crud/dictNew.js";
import tool from '@/utils/tool'
const columnsDist = inject('columnsDist')
const span=ref(6)
const formRef=ref(null)
const lodList=ref([])
//总页数
const pageInfo = ref({
  currentPage: 1,
  total: 0,
  totalPage:1
})
// 表单数据
const rules = {
    }
const formData = ref({
  id:'',
  send_list:[],
  tray_list:[],
  shipment:[], 
})
const columnsSendList = ref([
  {title: '标题', dataIndex: 'title',width:150,align:'center',hide:true,},
  {title: '服务类型', dataIndex: 'type',slotName: 'type',width:150,align:'center',hide:true,},
  {title: '目的地', dataIndex: 'address',width:180,slotName: 'address',align:'center',hide:true,},
  {title: '车辆', dataIndex: 'car_id',width:70,slotName: 'car_id',hide:true,},
  {title: '描述', dataIndex: 'remark',width:150,align:'center',hide:true,},
])
const columnsTrayList = ref([
  {title: '托盘编号', dataIndex: 'number',width:70,hide:true,},
  {title: '箱数', dataIndex: 'count',width:70,hide:true,},

  // {title: '提单号/入仓号', dataIndex: 'tray.order.number',width:180,align:'center',hide:true,},
  // {title: '柜号', dataIndex: 'tray.order.container_no',width:70,hide:true,},
  // {title: '服务类型', dataIndex: 'service_type_id',slotName: 'service_type_id',width:150,align:'center',hide:true,},
  // {title: 'ETA/入仓时间', dataIndex: 'tray.unpacking_at',width:150,align:'center',hide:true,},
])
const columnsLod = ref([  
  {title: '操作人', dataIndex: 'created_by',width:150,align:'center',hide:true,},
  {title: '操作时间', dataIndex: 'created_at',width:150,align:'center',hide:true,},
  {title: '类型', dataIndex: 'descripe',width:100,align:'center',hide:true,},
  {title: '箱唛', dataIndex: 'shipment.shipment_no',width:100,align:'center',hide:true,},
  {title: '出库单', dataIndex: 'send.title',width:100,align:'center',hide:true,},
  {title: '车辆', dataIndex: 'car.car_number',width:100,align:'center',hide:true,},
  {title: '备注', dataIndex: 'remark',width:100,align:'center',hide:true,},
]);
const lodData=ref({
  tray_list_id: '', 
  shipment_id: '', 
  car_id: '', 
  send_id: '',
  orderBy:'id',
  orderType:'desc',
  page: 1,
  pageSize: 10,
})
  //切换分页
  const pageChange=(e)=>{
  if(e){
    lodData.value.page=e
    onLog()
  }
}
  //切换条数
const pageSizeChange=(e)=>{
  if(e){
    lodData.value.pageSize=e
    onLog()
  }
}
 //详情
 const infoGet=(id)=>{
  waybillTrayList.read(id).then(res => {
        formData.value.tray_list=res.data.tray_list
        // formData.value.shipment=res.data.shipment_list
        formData.value.send_list=res.data.send_list
        lodData.value.shipment_id=res.data.shipment_id
        onLog()
      }) 
    }
   //操作日志
 const onLog=()=>{
  waybillList.waybillOperationLog(lodData.value).then(res => {
        lodList.value =  res.data.items
        //页数
        pageInfo.value = res.data.pageInfo
      }) 
    }  
const visible = ref(false)
  const onShow = async (value) => {
    visible.value = true
     //编辑
     if(value){
      infoGet(value.id) 
    }
    
  }
    const close = () => {
      formRef.value.resetFields();
      visible.value = false
      lodData.value.page=1
    }
const onBeforeCancel=()=>{
  Modal.confirm({
        title: '确认关闭?',
        onOk: () => {
          close()
        },
      });
}
defineExpose({ onShow })
</script>

<template>
  <a-drawer v-model:visible="visible" v-if="visible" width="80%" @cancel="close">
        <template #title>
          <div >详情</div>
          </template>
          <a-form ref="formRef" :rules="rules" :model="formData" auto-label-width>
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" title="托盘列表">   
              <a-table ref="trayListTableRef"  row-key="number" :columns="columnsTrayList" :data="formData.tray_list" :bordered="false"  size="mini" column-resizable :pagination="false">
                  <template #service_type_id="{ record }">{{getDictData('attrApi','dicthelpApi_waybillServiceShipmentTypeList',record.shipment.service_type_id,3,columnsDist) }}</template>                 
              </a-table>
            </a-tab-pane>
            <a-tab-pane key="2" title="出货单">   
              <a-table ref="sendTableRef"  row-key="id" :columns="columnsSendList" :data="formData.send_list" :bordered="false"  size="mini" column-resizable :pagination="false">
                  <template #type="{ record }">{{getDictData('attrApi','dicthelpApi_waybillServiceShipmentTypeList',record.type,3,columnsDist) }}</template>  
                  <template #address="{ record }">{{getDictData('attrApi','dicthelpApi_addressChang',record.address,1,columnsDist) }}</template>  
                  <template #car_id="{ record }">{{getDictData('attrApi','dicthelpApi_waybillCarList',record.car_id,3,columnsDist) }}</template>  
              </a-table>
            </a-tab-pane>
            <a-tab-pane key="3" title="操作日志">   
              <a-table ref="lodTableRef"  row-key="id" :columns="columnsLod" :data="lodList" :bordered="false"  size="mini" column-resizable :pagination="false">
                  <template #type="{ record }">{{getDictData('attrApi','dicthelpApi_waybillServiceShipmentTypeList',record.type,3,columnsDist) }}</template>  
              </a-table>
                <!-- 分页 -->
              <div class="foot-list">
                <a-pagination
                    :total="pageInfo.total"
                    show-total show-jumper show-page-size     
                    v-model:current="lodData.page"
                    @change="pageChange"
                    @page-size-change="pageSizeChange"
                    :page-size-options="[10, 20, 30, 50, 100]"
                    :page-size="lodData.pageSize"
                    style="display: inline-flex"
                />
              </div>
            </a-tab-pane>
            </a-tabs>
        </a-form>
        <template #footer> 
          <div style="display: flex; justify-content: space-between;align-items: center;">
            <div style="color: rgb(50 193 148);">
              <!-- tips：先选择"服务项目"后在操作明细,请按要求填写(导入)单据信息 -->
            </div>
            <div>
              <a-button @click="visible = false" style="margin-right: 20px;">关闭</a-button>
              <!-- <a-button type="primary" @click="handleBeforeOk(formRef)">
                保存
              </a-button> -->
            </div>
          </div>       
        </template>
      </a-drawer>
</template>
<style>
   .form-top-main{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
   }
   .tab-main{
    display: flex;
    align-items: center;
    margin: 10px 0;
   }
   .tab-main .arco-form-item{
    margin-bottom: 0;
   }
   .tab-main .arco-switch{
    margin-right: 20px;
   }
</style>